import React from 'react'
import { Form, Input, Button, Checkbox, Row, Col, Radio, Popover } from 'antd';
import { observer } from 'mobx-react';
import myinfo from '../../mobx/info';
import { reg } from '../../utils/validate';
import img1 from '../../assets/images/chinese.jpg'
import img2 from '../../assets/images/foreign.webp'
import img3 from '../../assets/images/jian.webp'
import img4 from '../../assets/images/xuliya.webp'
import { toast } from '../../utils/commom';
import { ajax } from '../../api';
function ADD({history}:any) {
    const {userInfo} = myinfo
    const onFinish =async (v:any)=>{
      console.log(v);
      v.userInfo = userInfo
      console.log(v);
      
      let {code,result}:any = await ajax.addfinish1(v)
      if(code==200){
        history.push('/main/finish/list')
      }
    }

    const onFinishFailed = ()=>{
        toast.error('请完善必填选项')
    }
    const content1 = (
      <div style={{width:300,height:300}}>
      <img style={{width:'100%'}} src={img1} alt="" />
      </div>
    );
    const content2 = (
      <div style={{width:300,height:300}}>
      <img style={{width:'100%'}} src={img2} alt="" />
      </div>
    );
    const content3 = (
      <div style={{width:300,height:300}}>
      <img style={{width:'100%'}} src={img3} alt="" />
      </div>
    );
    const content4 = (
      <div style={{width:300,height:300}}>
      <img style={{width:'100%'}} src={img4} alt="" />
      </div>
    );
    return (
        <div>
            <h2 style={{fontSize:30}}>装修申请</h2>
          <Row>
            <Col >
          
           <Form
      name="basic"
      labelCol={{ span:24 }}
      wrapperCol={{ span: 24 }}
      initialValues={{username:userInfo?.username}}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="业主姓名"
        name="username"
      >
        <Input  disabled  />
      </Form.Item>

      <Form.Item
        label="联系电话"
        name="phone"
        rules={[{ required: true, message: '请输入电话号码!' },
        {pattern:reg.phone,message:'请输入合法的手机号'}]}
      >
        <Input />
      </Form.Item>



      <Form.Item
        label="选择装修风格"
        name="type"
        rules={[{ required: true, message: '请选择风格!' }]}
      >
 <Radio.Group  style={{ marginTop: 16 }}>
   <Popover content={content1} title="风格" trigger="click">
    <Radio.Button value="1">中国风</Radio.Button>
    </Popover>
    <Popover content={content2} title="风格" trigger="click">
    <Radio.Button value="2">简约风</Radio.Button>
     </Popover>
      <Popover content={content3} title="风格" trigger="click">
     <Radio.Button value="3">叙利亚风</Radio.Button>
     </Popover>
     
      <Popover content={content4} title="风格" trigger="click">
    <Radio.Button value="4">欧美风</Radio.Button>
     </Popover>
  
    <Radio.Button  value="5">更多</Radio.Button>
    </Radio.Group>
      </Form.Item>

      <Form.Item
        label="备注要求"
        name="remark"
      >
        <Input.TextArea showCount maxLength={50}  />
      </Form.Item>
    <Row>
      <Col>
      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button  type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
      </Col>
    </Row>
     
    </Form>
    </Col>
          </Row>
    </div>
  )
}

export default observer(ADD)